<template>
    <div>            
        <article>
            <h3>项目情况汇总</h3>
            <a-row :gutter="24">
                <a-col :md="24" :lg="24" :xl="8" class="bottom first-bottom">
                    <section class="all-line">
                        <div class="header">
                            全部项目<em>
                            <div class="num-box-item" v-for="(item, index) in computeNumber1" :key="index">
                                <span ref="numberItem1">0123456789</span>
                            </div>                            
                            </em><span>个</span>
                        </div>
                        <div class="flex-star">
                            <span><i>执行中</i><p><em><a-statistic :value="writen.executeTotal"/></em>个</p></span>
                            <a-tooltip>
                                <span><i>已完成</i><p><em><a-statistic :value="writen.finishTotal"/></em>个</p></span>
                                <template slot="title">所有标准节点完成报工，或按特定标准节点报工算作完成的项目</template>
                            </a-tooltip>
                            <a-tooltip>
                                <span><i>已中止</i><p><em><a-statistic :value="writen.dumpProjects"/></em>个</p></span>
                                <template slot="title">中途停止/转储项目</template>
                            </a-tooltip>
                            <span><i>节点完成率</i><p><em><a-statistic :value="writen.nodeFinishPrecent"/></em>%</p></span>
                            <span><i>正常执行</i><p><em><a-statistic :value="writen.executeNormal"/></em>个</p></span>                            
                            <a-tooltip>
                                <span><i>逾期项目</i><p><em><a-statistic :value="writen.executeAbnormal"/></em>个</p></span>
                                <template slot="title">至少一个标准节点逾期的项目或特定标准节点逾期项目。如工程类项目【投产】节点延误才算逾期</template>
                            </a-tooltip>    
                            <span><i>节点逾期率</i><p><em><a-statistic :value="writen.executeNodeOverduePrecent"/></em>%</p></span>
                        </div>
                        <!-- <div class="progress">
                            <mini-progress :percentage="Number(writen.finishOverDuePrecent)" />
                        </div> -->
                    </section>
                </a-col>
                <a-col :md="24" :lg="12" :xl="8" class="bottom">
                    <section class="project-line flex-center" >
                        <div class="flex-between">
                            <div class="month-create">
                                <i class="iconfont icon-xinzengxiangmu"></i>
                                <div>
                                    <span class="til">本月新增项目</span>
                                    <span><em><a-statistic :value="writen.monthCreate"/></em>个</span>    
                                </div>                                
                            </div>
                            <a-tooltip>
                                <a-statistic title="环比" :precision="0" :value="Math.abs(writen.comparePreMonthCreatePrencent || 0)" suffix="%" class="statis-right">
                                    <template #prefix>
                                        <span :class="writen.comparePreMonthCreatePrencent > 0 ? 'arrow-up' : 'arrow-down'"></span>
                                    </template>
                                </a-statistic>
                                <template slot="title">本月与上月对比，即与上一统计周期比较</template>
                            </a-tooltip>
                            <a-tooltip>
                                <a-statistic title="同比" :precision="0" :value="Math.abs(writen.comparePreYearCreatePrecent || 0)" suffix="%">
                                    <template #prefix>
                                        <span :class="writen.comparePreYearCreatePrecent > 0 ? 'arrow-up' : 'arrow-down'" ></span>
                                    </template>
                                </a-statistic>  
                                <template slot="title">本月与去年本月对比，即与历史同期比较</template>  
                            </a-tooltip>                        
                        </div>
                        <div class="hr-project"></div>
                        <div class="flex-between">
                            <div class="month-create">
                                <i class="iconfont icon-wanchengxiangmu"></i>
                                <div>
                                    <span class="til">本月完成项目</span>
                                    <span><em><a-statistic :value="writen.monthFinish"/></em>个</span>    
                                </div>                                
                            </div>
                            <a-tooltip>
                                <a-statistic title="环比" :precision="0" :value="Math.abs(writen.comparePreMonthFinishPrecent || 0)" suffix="%" class="statis-right">
                                    <template #prefix>
                                        <span :class="writen.comparePreMonthFinishPrecent > 0 ? 'arrow-up' : 'arrow-down'" ></span>
                                    </template>
                                </a-statistic>
                                <template slot="title">本月与上月对比，即与上一统计周期比较</template>
                            </a-tooltip>
                            <a-tooltip>
                                <a-statistic title="同比" :precision="0" :value="Math.abs(writen.comparePreYearFinishPrecent || 0)" suffix="%">
                                    <template #prefix>
                                        <span :class="writen.comparePreYearFinishPrecent > 0 ? 'arrow-up' : 'arrow-down'" ></span>
                                    </template>
                                </a-statistic>  
                                <template slot="title">本月与去年本月对比，即与历史同期比较</template>
                            </a-tooltip>                        
                        </div>
                    </section>
                </a-col>
                <a-col :md="24" :lg="12" :xl="8" class="bottom">
                    <section class="access-line flex-between">
                        <img src="@/assets/reportNum.png" alt="">
                        <div>
                            <div><span></span>海芯用户量<em class="col-orange">
                                <div class="num-box-item" v-for="(item, index) in computeNumber0" :key="index">
                                    <span ref="numberItem0">0123456789</span>
                                </div>
                            </em>人</div>                                                        
                            <div><span></span>当月日均访问量<em class="col-green">{{writen.mdayUsers}}</em>人</div>
                            <div><span></span>当日访问量<em class="col-green">{{writen.currDayVisitNum}}</em>人</div>
                            <!-- <p>环比<span :class="writen.comparePreDayVisitPrecent > 0 ? 'arrow-up' : 'arrow-down'"></span>{{writen.comparePreDayVisitPrecent}}人</p> -->
                        </div>
                    </section>
                </a-col>
            </a-row>  
            <a-row :gutter="24" class="project-article">
                <a-col :md="24" :lg="24" :xl="8" class="bottom">
                    <a-spin :spinning="radioLoading">
                    <section class="info-line">
                        <h3><i class="iconfont icon-biao1"></i>项目情况表</h3>
                        <div class="flex-between">
                            <a-radio-group v-model="radioValue" @change="getRadioData">
                                <template v-for="item of radioList" >
                                    <a-tooltip :key="item.value">
                                        <a-radio  :value="item.value">{{item.name}}</a-radio>
                                        <template slot="title">{{item.tip}}</template>
                                    </a-tooltip>
                                </template>
                            </a-radio-group>
                            <!-- <div class="btn-line">
                                <a-button type="primary">                                    
                                    更多<a-icon type="more" class="more"/>
                                </a-button>
                            </div> -->                            
                        </div> 
                        <div class="table-box">
                            <a-table
                                :columns="radioColumns"
                                :data-source="proRadioData"
                                :pagination="false"
                                rowKey='projectNo'
                            >
                                <template slot="totalBudget" slot-scope="text" v-if="text">
                                    <a-statistic :value="text"/>
                                </template>
                                <template slot="projectNo" slot-scope="text, record">
                                    <span :class="{'btn-span': !(!record.projectAll && !record.projectMember) }" @click="handleClick(record)">{{text}}</span>
                                </template>
                                
                            </a-table>     
                            <a-pagination v-if="proRadioData.length > 0"
                                size="small"
                                v-model="proRadioPagination.current"
                                :total="proRadioPagination.total"
                                @change="proRadioPageChange"
                            >                                
                            </a-pagination>
                        </div>    
                    </section>
                    </a-spin>
                </a-col>
                <a-col :md="24" :lg="24" :xl="16" class="bottom">
                    <a-spin :spinning="spinning">
                    <section class="type-line">                        
                        <div class="flex-between">
                            <h3>项目大类</h3>
                            <div class="nav">
                                <div v-for="item of projectTypes" :key="item.value" @click="typeOnChange(item, 'projectTypesValue')">
                                    <span :class="['hoverShow', {active: projectTypesValue === item.value}]">{{item.name}}</span>
                                </div>
                            </div>
                            <a-button type="primary" @click="handleChangePage">
                                <i class="iconfont icon-baobiaozhongxin"></i>
                                数据表
                            </a-button>
                        </div>                        
                        <div class="content-box">
                            <a-row :gutter="24" >
                                <a-col :md="8" :lg="8" :xl="8">
                                    <slice-shape-pie :dataSource="projectPie"/>
                                </a-col>
                                <a-col :md="16" :lg="16" :xl="16" class="position">                                    
                                    <div class="tab-box">
                                        <template v-for="item of typeList">
                                            <a-tooltip :key="item.value">
                                                <span
                                                :class="[{active: type === item.value}]" 
                                                @click="typeOnChange(item, 'type')">{{item.name}}</span> 
                                                <template slot="title">{{item.tip}}</template>
                                            </a-tooltip>
                                        </template>   
                                    </div>
                                    <div class="type-num-tlt">数量(个)</div>
                                    <line-chart-multid :dataSource="projectLine"/>
                                </a-col>
                            </a-row>
                        </div>                            
                    </section>
                    </a-spin>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :md="24" :lg="24" :xl="24">
                    <section class="work-line">
                        <div>
                            <h3><i class="iconfont icon-biao1"></i>报工情况统计表</h3>                                                
                            <a-select placeholder="请选择" v-model="selValue"  @change="getProjectData">
                                <a-select-option v-for="(item,index) of selValueTypes" 
                                :key="index" :value="item.value">{{item.name}}</a-select-option>
                            </a-select>  
                        </div>
                        <div class="table-box pagination-right position">
                            <div class="soli-tooltip">
                                <a-tooltip>                                        
                                    未完成报工<template slot="title">不含立项节点</template>
                                </a-tooltip>
                            </div>
                            <a-table
                                :columns="projectColumns"
                                :data-source="projectData"
                                :loading="projectLoading"
                                :pagination="false"
                                :rowKey="(record,index)=>{return record.projectTypeCode + index}"
                                childrenColumnName="childTypeReports"
                            >                                
                                <div slot="unCompleteReport" slot-scope="text">
                                    <a-tooltip>                                        
                                        {{text}}<template slot="title">不含立项节点</template>
                                    </a-tooltip>
                                </div>
                                <span slot="over" slot-scope="text">
                                    {{text ? text + '%' : ''}}
                                </span>
                            </a-table>
                        </div> 
                    </section>
                </a-col>
            </a-row>
        </article>
        <ProjectDetTable
            :tableTitle="visibleObj.title" 
            :visible="visible"
            :pagination="false"
            :proData="visibleObj.proData" 
            :proColumns="visibleObj.proColumns"
            @closeVisible="closeVisible"/>
    </div>
</template>
<script>
import {getAction, postAction} from '@/api/manage'
import MiniProgress from '@/views/reportCenter/home/component/MiniProgress'
import SliceShapePie from '@/views/reportCenter/home/component/SliceShapePie'
import LineChartMultid from '@/views/reportCenter/home/component/LineChartMultid'
import ProjectDetTable from '@/views/reportCenter/home/component/ProjectDetTable'
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"

export default {
    components: {
        MiniProgress,
        LineChartMultid,
        SliceShapePie,
        ProjectDetTable,
    },
    props: {
      proyear: {
        type: String,
        default: ''
      },
      prolist:{
        type: Array,
        default: () => []
      }
    },  
    data () {
        return {
            radioList: [                
                {name: '热点项目', value: 'Hot', tip: '公司重点关注项目'},
                {name: '严重延误', value: 'Overdue', tip: '至少2个关键节点均延期1个月以上项目'},
                {name: '典型提前', value: 'Advance', tip: '所有关键节点均未延期且至少1个关键节点均提前1个月以上项目'},
            ],
            radioValue: 'Hot',
            radioLoading: false,
            proRadioData: [],
            radioColumns:[
                {title: '项目号',dataIndex: 'projectNo',width: '25%',align:'left',ellipsis: true, scopedSlots: { customRender: 'projectNo' },},
                {title: '项目名称',dataIndex: 'projectName',width:'25%',align:'left',ellipsis: true},
                {title: '项目经理',dataIndex: 'projectManagers',width:'25%',align:'left',ellipsis: true},
                {title: '总投资(万元)',dataIndex: 'totalBudget',width:'25%',align:'right',ellipsis: true, scopedSlots: { customRender: 'totalBudget' },},
            ],
            proRadioPagination:{
                total:0,
                current:1
            },
            // 
            projectColumns:[
                {title: '项目类型',dataIndex: 'projectType',width: '23%',align:'left',ellipsis: true},
                {title: '项目总数',dataIndex: 'projectNums',width:'9.6%',align:'left',ellipsis: true},
                {title: '报工单总数',dataIndex: 'reporteNums',width:'9.6%',align:'left',ellipsis: true},
                {title: '已报工',dataIndex: 'completeReport',width:'9.6%',align:'left',ellipsis: true},
                {title: '按时报工',dataIndex: 'onTimeReport',width:'9.6%',align:'left',ellipsis: true},
                {title: '逾期报工',dataIndex: 'overDueReport',width:'9.6%',align:'left',ellipsis: true},
                {title: '未完成报工',dataIndex: 'unCompleteReport',width:'9.6%',align:'left',ellipsis: true,scopedSlots: { customRender: 'unCompleteReport' },},
                {title: '已逾期',dataIndex: 'unCompleteReportOverdue',width:'9.6%',align:'left',ellipsis: true},
                {title: '逾期率',dataIndex: 'overDueReportPrecent',width:'9.6%',align:'left',ellipsis: true,scopedSlots: { customRender: 'over' },},                
            ],
            projectData:[],
            projectLoading: false,
            //
            projectTypes:[],
            projectTypesValue: '',
            selValueTypes: [],
            selValue: '',
            //
            typeList: [
                {name: '新增/完成', value: 'projectYearBigType', tip: '查看每月新增立项完成项目数量和完成验收项目数量'},
                {name: '新增趋势', value: 'projectMonthAll', tip: '查看新增立项完成项目数量增长趋势'},
            ],
            type: 'projectYearBigType',
            //
            visible: false,
            visibleObj: {},
            writen: {},
            projectPie: [],
            projectLine: [],
            computeNumber0: ['0'],
            computeNumber1: ['0'],
            spinning: false,
        }
    },
    mounted () {  
        this.projectTypes = Object.assign(this.prolist)
        this.projectTypesValue = this.proyear;
        this.selValueTypes = Object.assign(this.prolist)       
        this.selValue = this.proyear;
        
        this.getProjectData() // 报工情况统计表        
        this.getRadioData()   // 项目情况表
        this.getReportProject()   // 全部项目（执行中、正常、已完成、逾期）
        this.typeOnChange() // 项目大类
    },    
    methods: {
        /**
        * 全部项目（执行中、正常、已完成、逾期）        
        */
        getReportProject(){
            getAction(`/reportHome/reportProjectCreateAndFinish`).then(res=>{                
                if(res.code==200){
                    this.writen = res.result;
                    this.writen.totalProject = res.result.totalProject || '--'                        
                    this.computeNumber0 = this.writen.totalUsersNum ? String(this.writen.totalUsersNum).split('') : ['0']
                    this.computeNumber1 = this.writen.totalProject ? String(this.writen.totalProject).split('') : ['0']                    
                    setTimeout(()=>{
                        this.setNumberTransform()
                    }, 100)                    
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
            })
        },
        /**
        * 项目情况表        
        */
        getRadioData(){
            this.radioLoading=true;
            postAction(`/reportHome/projectList${this.radioValue}`,{              
                pageNo: this.proRadioPagination.current,
                pageSize: 10 
            }).then(res=>{                
                if(res.code==200){
                    this.proRadioData = res.result.records;
                    this.proRadioPagination.total = res.result.total;
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
                this.radioLoading=false;
            })
        },
        proRadioPageChange(page){
            this.proRadioPagination.current = page
            this.getRadioData();
        },

        /**
        * 报工情况统计表        
        */
        getProjectData(){
            this.projectLoading=true;
            getAction('/reportHome/projectYearReport',{year: this.selValue}).then(res=>{ 
                if(res.code==200){
                    this.projectData = res.result || [];
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
                this.projectLoading=false;
            })
        },
        /**
        * 项目大类        
        */
        typeOnChange(obj, type){
            if(obj && obj.value != this[type]){
                this[type] = obj.value;
            }
            this.spinning = true
            if(this.type === 'projectYearBigType'){
                this.getYearBigType()
            }else{
                this.getMonthAll()
            }            
        },
        getMonthAll(){
            getAction(`/reportHome/${this.type}`, {year: this.projectTypesValue}).then(res=>{                
                if(res.code==200 && res.result){
                    this.projectLine = res.result.projectAddTrend || []
                    this.visibleObj.projectMonthAll = this.projectLine                                       
                    this.forDataLine('monthAll')

                    this.projectPie = res.result.projectYearBigTypeTotal
                    this.projectPie.forEach(item=>{
                        item.item = item.bigType
                        item.projectPie = res.result.projectYearBigTypeTotal
                    })
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
                this.spinning = false
            })
        },
        getYearBigType(){
            getAction(`/reportHome/${this.type}`, {year: this.projectTypesValue}).then(res=>{                
                if(res.code==200 && res.result){
                    this.visibleObj = res.result
                    this.projectPie = res.result.projectYearBigTypeTotal
                    this.projectPie.forEach(item=>{
                        item.item = item.bigType
                        item.projectPie = res.result.projectYearBigTypeTotal
                    })
                    const completes = res.result.projectYearMonthCompletes // 完成项目
                    const creates = res.result.projectYearMonthCreates     // 新增项目
                    completes.forEach(item=>{
                        item.x = '完成项目数量'
                    })
                    creates.forEach(item=>{
                        item.x = '新增项目数量'
                    })
                    this.projectLine = [...creates, ...completes ]   
                    this.forDataLine('yearAll')                                     
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
                this.spinning = false
            })
        },
        forDataLine(type){
            this.projectLine.forEach(item=>{
                if(type === 'monthAll'){
                    item.x = '项目数量'
                }
                item.y = item.countMonthNum
                if(item.countMonth){
                    item.countMonth = item.countMonth.indexOf('-') >= 0 ? item.countMonth.split('-')[1] + '月' :  item.countMonth  + '月'                   
                    item.countMonth = item.countMonth.indexOf('0')===0 ? item.countMonth.substr(1, item.countMonth.length) : item.countMonth
                }
            })
        },
        /**
         * 跳转项目 
         */
        handleClick(item){
            if(!item.projectAll && !item.projectMember){
                return
            }
            if(item.projectMember){
              let urlJump = this.$router.resolve({ path: `/projectbuildstup/baseInfo?projectBuildId=`+item.id+'&projectMember=1' })
              window.open(urlJump.href, '_blank')
            }else{
                // &projectClassCode=${this.activeCode}
                const detailUrl=this.HTE_OLD_SERVER_URL+`/projectBuild/buildBasic?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}&id=
                    ${item.id}&projectType=${item.projectType}`;
                //查看明细功能
                const projectDetailUrl = item.status === 1 ? detailUrl :
                            (item.status === 2 || item.status === 3) ? this.HTE_OLD_SERVER_URL+`/projectBuild/audit?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}&id=${item.id}`: 
                            this.HTE_OLD_SERVER_URL+`/projectBuild/auditDetail?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}&id=${item.id}`;
                window.open(projectDetailUrl, "_blank" );
            }
        },
        setNumberTransform() {
            // 设置每一位数字的偏移
            const _this = this
            for (let index = 0; index < 2; index++) {
                const numberItems = _this.$refs['numberItem' + index]
                const comNum = _this['computeNumber' + index]
                for (let index = 0; index < numberItems.length; index++) {
                    const elem = numberItems[index]
                    elem.style.transform = `translate(-50%, -${comNum[index] * 10}%)`
                    if (index > 0) {
                        elem.style.transition = `transform 0.${index * 2}s ease-in-out`
                    }
                }
            }
        },
        /**
         * 查看数据表 
         */
        handleChangePage(){                    
            let data = 'projectYearMonthCompletes'
            if(this.type === 'projectYearBigType'){
                this.visibleObj.proColumns = [
                    {title: '月份',dataIndex: 'countMonth',width: '20%',align:'center',ellipsis: true},
                    {title: '新增项目数量',dataIndex: 'reporteNums',width:'40%',align:'center',ellipsis: true},
                    {title: '完成项目数量',dataIndex: 'completeReport',width:'40%',align:'center',ellipsis: true},                
                ]   
                data = 'projectYearMonthCompletes'                                            
            }else{
                this.visibleObj.proColumns = [
                    {title: '月份',dataIndex: 'countMonth',width: '20%',align:'center',ellipsis: true},
                    {title: '新增项目数量',dataIndex: 'reporteNums',width:'80%',align:'center',ellipsis: true},             
                ]        
                data = 'projectMonthAll'                
            }
            this.visibleObj.title = `${this.projectTypesValue!='all'? this.projectTypesValue +'年':''}${this.type === 'projectYearBigType'? '新增/完成':'新增趋势'}数据表`
            this.visibleObj.proData = []
            this.visibleObj[data].forEach((item, index) =>{
                this.visibleObj.proData.push({
                    countMonth: item.countMonth,
                    completeReport: this.type === 'projectYearBigType' ? item.y : '',
                    reporteNums: this.type === 'projectYearBigType' ? this.visibleObj.projectYearMonthCreates[index].y : item.y,
                    projectNo: index
                })
            })
            this.visible = true        
        },
        closeVisible(){
            this.visible = false
        }
    }
}
</script>
<style lang="less" scoped>
@import 'home.less';
section{
    .header{border-bottom: 1px solid #38448e;font-size: 16px;padding-bottom: 8px;font-weight: bold;margin-top:-5px;padding-left:5px;
        em{padding: 0 5px;color: #fff;font-weight: initial;}
        span{font-size: 14px;font-weight: initial;}
        + div{margin: 13px 5px 12px;
            em{font-size:20px;color: #fff;margin-right: 5px;margin-top: -3px;display: inline-block;}
        }
    }
    .progress{background-color: #10103a;border-radius: 4px;opacity: 0.79;padding: 24px 15px 6px 54px}    
    &.all-line{
        .flex-star {flex-wrap: wrap;display:flex;margin:3px 5px;
            span{font-size: 13px;width: 25%;
                i{font-style: inherit;position: relative;top: 4px;}
                p{height: 30px;overflow: hidden;}
                &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4){border-bottom: 1px solid #38448e;margin-bottom: 5px;padding-bottom: 10px;}
            } 
        }        
        /deep/ .ant-statistic{margin-right: 0;}
    }
    &.project-line{flex-wrap: wrap;
        >div{width: 100%;padding: 0 5px;
            em{color: #fff;padding:0 5px;
                &.percent{font-size: 20px;padding: 0;width: 73px;}
            }
            >div{text-align: right;
                .anticon{font-size: 13px;margin: 0 5px;}                
                &:first-of-type{text-align: left;font-size:12px;
                    >div{display: inline-block;}
                    .til{display: inline-block;width: 100%;font-size: 12px;position: relative;bottom: -7px;margin-left: 5px;}
                }
            }
            .iconfont{color: #34bcf8;font-size: 30px;margin-right: 5px;position: relative;top: -4px;}        
        }
        .statis-right{margin-right: 20px;}
        .hr-project{border-bottom: 1px solid #38448e;width: 100%;height: 1px;}
    }
    &.access-line{padding-right: 0;
        >div{flex:1;padding-left: 5%;margin-top:-33px;
            >div{font-weight: bold;font-size:16px;white-space: pre;
                >span{border: 1px solid #a2f2ff;width: 16px;height: 16px;position: relative;display: inline-block;border-radius: 100%; margin-right: 10px;vertical-align: text-bottom;
                    &:after{content: '';position: absolute;top: 50%;width: 10px;height: 10px;margin-top: -5px;background-color: #a2f2ff;display: inline-block;border-radius: 100%;left: 50%;margin-left: -5px;}
                }  
                em{padding: 0 4px;}
            }
            >p{margin-left: 27px;
                >span{margin: 0 5px;}
            }
        }
        img{width: 36%;margin-left: -10px;max-width:200px;}
    }
    &.type-line{padding: 0;
        h3{color: #fff;}
        >.flex-between{align-items: baseline;border-bottom: 1px solid #38448e;padding: 10px 20px 7px;
            .nav{display: flex;flex: 1;padding: 0 50px;
                >div{margin: 0 20px;}
            }
        }
        .content-box{display: flex;
            >div{
                &:first-of-type{flex:1;}
                &:last-of-type{flex:2;}
            }
            .tab-box{margin-top:25px;}
        }        
    }
    &.work-line{
        h3{display: inline-block;margin-right: 15px;}        
    }    
    &.info-line .flex-between{margin: 12px 0;}
}
.pagination-right{position: relative;
    /deep/ .ant-table-thead[key='projectType'] >span{padding-left: 10px;}
}
.btn-span{color: #34bcf8;cursor: pointer;}
.bottom{margin-bottom: 24px;}
.num-box-item {
  display: inline-block;
  position: relative;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  writing-mode: tb-rl;
  text-orientation: upright;
  overflow: hidden;
  height: 35px;
  line-height: 34px;
  top: 2px;
  width: 14px;
  span {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -0%);
    transition: transform 0.8s ease-in-out;
    letter-spacing: 10px;
    font-size: 25px !important;
  }
}
.soli-tooltip{position: absolute;z-index: 1;left: 72%;top: 8px;opacity: 0;}
@media (max-width:1600px){    
    section.project-line {
        >div{padding: 0;
        }
    }
}
@media (max-width:1430px){
    .project-article{
        >.ant-col-xl-8{width: 100%}
        >.ant-col-xl-16{width: 100%}
    }   
    .month-create>.iconfont {display: none} 
    .month-create span.til{bottom: -4px !important}
}
@media (max-width: 992px){    
    section.project-line {
        >div{padding: 5;}
    }
}
</style>